<template>
	<view style="width: 100%;">
		<view class="pre-place">
			<view :class="item.day===selectedDate?'item-active':'item'" v-for="item in dateList">
				<view :class="item.day===selectedDate?'item-active-1':'item-1'" @click="selectDate(item)">
					<text :class="item.day===selectedDate?'font-active':''">{{item.week}}</text>
					<text :class="item.day===selectedDate?'font-active':''">{{item.day}}</text>
				</view>
			</view>
		</view>
		<view style="height: 800rpx;overflow-y: scroll;">
			<view class="area">
				<view class="item-1">
					<view class="item-1-1" v-for="(item,index) of timeList">
						<text style="margin-top: -70rpx;">{{item.open}}</text>
					</view>
				</view>
				<view class="item-2">
					<view style="display: flex;flex-direction: row;" v-for="(timeItem,index1) of timeList">
						<view v-if="index1!=timeList.length-1" class="item-2-1" v-for="(venueItem,index2) of venueList">
							<text class="head" v-if="index1===0">{{venueItem.name}}</text>
							<view v-if="index1!==0&&checking(venueItem,timeItem)" class="book"></view>
							<view v-if="index1!==0&&!checking(venueItem,timeItem)"
								:class="isSelectPlace(venueItem,timeItem)?'cur-book':'not-book'">
								<text style="color: white;"
									@click="selectPlace(venueItem,timeItem)">¥{{venueItem.price}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view v-if="selectList.length===0" class="book-card-1">
			<view class="book-card-1-item">
				<view class="book-card-1-item-1"></view>
				<text>可预订</text>
			</view>
			<view class="book-card-1-item">
				<view class="book-card-1-item-2"></view>
				<text>不可预订</text>
			</view>
		</view>

		<view v-if="selectList.length>0" class="book-card-2">
			<view class="book-card-2-item-1">
				<view>已选择场次:{{selectList.length}}</view>
				<text @click="clear">清空</text>
			</view>

			<view class="book-card-2-item-2">
				<view class="book-card-2-item-2-item" v-for="item in selectList">
					<view class="book-card-2-item-2-item-1">
						<text style="color: white;font-size: 30rpx;">{{item.time}}</text>
					</view>
					<view class="book-card-2-item-2-item-2">
						<text style="color: #5b7cf2;">{{item.name}}</text>
					</view>
				</view>
			</view>

		</view>

		<view class="bottom-card">
			<view class="line">
				<view class="line-item"></view>
			</view>

			<view class="bottom-card-item">
				<view style="margin-left: 25rpx;">
					<text style="color: #5b7cf2;font-size: 50rpx;">¥{{totalPrice}}</text>
				</view>
				<view class="bottom-card-item-sumbit">
					<text v-if="this.selectList.length==0" @click="sumbit" style="color: white;">请选择场地</text>
					<text v-else @click="sumbit" style="color: white;">确认</text>
				</view>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				msgType: 'success',
				messageText: '成功',
				m: null,
				n: null,
				totalPrice: 0,
				selectedDate: "8月14日",
				dateList: [{
					"week": "今天",
					"day": "8月14日"
				}, {
					"week": "明天",
					"day": "8月15日"
				}, {
					"week": "后天",
					"day": "8月16日"
				}, {
					"week": "周四",
					"day": "8月17日"
				}, {
					"week": "周五",
					"day": "8月18日"
				}, {
					"week": "周六",
					"day": "8月19日"
				}, {
					"week": "周日",
					"day": "8月20日"
				}],
				activeId: 1,
				venueList: [{
						"id": 1,
						"name": "场地1",
						"bookTimes": [1, 2, 5],
						"price": 40
					},
					{
						"id": 2,
						"name": "场地2",
						"bookTimes": [4, 5],
						"price": 40
					},
					{
						"id": 3,
						"name": "场地3",
						"bookTimes": [8, 9],
						"price": 40
					},
					{
						"id": 4,
						"name": "场地4",
						"bookTimes": [8, 9],
						"price": 40
					},
					{
						"id": 5,
						"name": "场地5",
						"bookTimes": [8, 9],
						"price": 40
					},
					{
						"id": 6,
						"name": "场地6",
						"bookTimes": [8, 9],
						"price": 40
					},
					{
						"id": 7,
						"name": "场地7",
						"price": 40
					},
					{
						"id": 8,
						"name": "场地8",
						"price": 40
					},
					{
						"id": 9,
						"name": "场地9",
						"price": 40
					},
					{
						"id": 10,
						"name": "场地10",
						"price": 40
					},
					{
						"id": 11,
						"name": "场地11",
						"price": 40
					},
					{
						"id": 12,
						"name": "场地12",
						"price": 40
					},
					{
						"id": 13,
						"name": "场地13",
						"price": 40
					}
				],
				selectList: [],
				timeList: [{},
					{
						id: 1,
						open: "10:00",
						end: "11:00"
					},
					{
						id: 2,
						open: "11:00",
						end: "12:00"
					}, {
						id: 3,
						open: "12:00",
						end: "13:00"
					}, {
						id: 4,
						open: "13:00",
						end: "14:00"
					}, {
						id: 5,
						open: "14:00",
						end: "15:00"
					}, {
						id: 6,
						open: "15:00",
						end: "16:00"
					}, {
						id: 7,
						open: "16:00",
						end: "17:00"
					}, {
						id: 8,
						open: "17:00",
						end: "18:00"
					}, {
						id: 9,
						open: "18:00",
						end: "19:00"
					}, {
						id: 10,
						open: "19:00",
						end: "20:00"
					}, {
						id: 11,
						open: "20:00",
						end: "21:00"
					},
					{
						id: 12,
						open: "21:00",
						end: "22:00"
					}, {
						id: 13,
						open: "22:00",
						end: "23:00"
					},
				]
			}
		},
		onLoad() {
			this.m = this.venueList.length;
			this.n = this.timeList.length;
		},
		methods: {
			messageToggle(type, msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open()
			},
			checking(venueItem, timeItem) {
				if (venueItem.bookTimes) {
					if (venueItem.bookTimes.includes(timeItem.id)) {
						return true;
					}
				}
				return false;
			},
			isSelectPlace(venueItem, timeItem) {
				var data = {
					placeId: venueItem.id,
					name: venueItem.name,
					timeId: timeItem.id,
					time: timeItem.open + "-" + timeItem.end
				}
				for (let i = 0; i < this.selectList.length; i++) {
					if (this.selectList[i].placeId === data.placeId && this.selectList[i].timeId === timeItem.id) {
						return true;
					}
				}
				return false;
			},
			selectPlace(venueItem, timeItem) {
				var data = {
					placeId: venueItem.id,
					name: venueItem.name,
					timeId: timeItem.id,
					time: timeItem.open + "-" + timeItem.end
				}
				if (this.selectList) {
					let flag = true
					for (let i = 0; i < this.selectList.length; i++) {
						if (this.selectList[i].placeId === data.placeId && this.selectList[i].timeId === timeItem.id) {
							flag = false;
							this.totalPrice = this.totalPrice - venueItem.price
							this.selectList.splice(i, 1)
						}
					}
					if (flag) {
						if (this.selectList.length > 2) {
							this.messageToggle("error", "最多选择三片场地")
							return
						}
						this.totalPrice = this.totalPrice + venueItem.price
						this.selectList.push(data);
					}
				} else {
					this.messageToggle("error", "最多选择三片场地")
					return
					this.totalPrice = this.totalPrice + venueItem.price
					this.selectList.push(data);
				}

			},
			clear() {
				this.selectList = []
				this.totalPrice = 0
			},
			sumbit() {
				uni.navigateTo({
					url: '/pages/pre/order/index'
				});
			},
			selectDate(item) {
				this.selectedDate = item.day
			}
		}
	}
</script>

<style lang="scss">
	.line {
		width: 100%;
		display: flex;
		height: 30rpx;
		flex-direction: row;
		justify-content: center;

		.line-item {
			border-bottom: 1px solid #d7d7d8;
			width: 97%;
		}
	}

	.bottom-card {
		position: absolute;
		bottom: 0;
		width: 100%;

		.bottom-card-item {
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.bottom-card-item-sumbit {
				width: 200rpx;
				background-color: #5b7cf2;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
			}
		}
	}

	.book-card-1 {
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		margin-top: 20rpx;

		.book-card-1-item {
			display: flex;
			flex-direction: row;
			text-align: center;
			align-items: center;
			margin-right: 20rpx;

			.book-card-1-item-1 {
				width: 20rpx;
				height: 20rpx;
				background-color: #5fa863;
				margin-right: 5rpx;
			}

			.book-card-1-item-2 {
				width: 20rpx;
				height: 20rpx;
				background-color: #cdcdcd;
				margin-right: 5rpx;
			}
		}
	}

	.book-card-2 {
		margin-left: 20rpx;
		margin-top: 20rpx;

		.book-card-2-item-1 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-right: 20rpx;
		}

		.book-card-2-item-2 {
			display: flex;
			flex-direction: row;

			.book-card-2-item-2-item {
				display: flex;
				height: 100rpx;
				width: 190rpx;
				border: 3rpx solid #5b7cf2;
				border-radius: 10rpx;
				margin-right: 10rpx;
				background-color: white;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.book-card-2-item-2-item-1 {
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 40%;
					background-color: #5b7cf2;
					width: 100%;
					display: flex;

				}

				.book-card-2-item-2-item-2 {
					height: 60%;
					background-color: white;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}


	::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	page {
		height: 100%;
		background: white;
	}

	.pre-place {
		width: 100%;
		display: flex;
		/* padding: 20rpx; */
		flex-direction: row;

		.item {
			display: flex;
			flex-direction: row;
			justify-content: center;
			background-color: white;
			border-bottom: 4rpx solid #cdcdcd;
			width: 300rpx;
			min-width: 140rpx;

			.item-1 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.item-active {
			display: flex;
			flex-direction: row;
			justify-content: center;
			background-color: white;
			border-bottom: 4rpx solid #ba89f2;
			width: 300rpx;
			min-width: 140rpx;

			.item-active-1 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.font-active {
				color: #ba89f2;
			}
		}

	}

	.area {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		text-align: center;

		.item-1 {
			.item-1-1 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				border: 2rpx solid transparent;
			}
		}

		.item-2 {
			display: flex;
			flex-direction: column;
			overflow-x: scroll;
			overflow-y: hidden;
			height: 100%;
			margin-left: -30rpx;

			.head {
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				background-color: white;

			}

			.not-book {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				background-color: #5fa863;
			}

			.cur-book {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				background-color: #5b7cf2;
			}

			.selected-area {
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				background-color: #55aaff;
			}

			.book {
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				background-color: #cdcdcd;
			}

			.item-2-1 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				min-width: 140rpx;
				width: 140rpx;
				height: 70rpx;
				border: 2rpx solid white;
				background-color: aqua;
			}
		}
	}
</style>